<template>
	<view>
		<loadPage :loading="showLoading"></loadPage>
		<template v-if="!showLoading">
			<view class="fpInfo">
				<Screening @select="getSelectDateRange" :selectType="false"></Screening>
				<u-empty v-if="!dateline.length" class="needisempty" textSize="30" text="暂无浏览记录" mode="order" iconSize="240rpx"
					font-size="40rpx" marginTop="200">
				</u-empty>
				<u-swipe-action v-else>
					<u-swipe-action-item v-for="item in dateline" :index="item.productId" :key="item.productId"
						@click="cancelFootprint(item['productId'])" :options="options">
						<footpoint :details="item" class="fpCard"></footpoint>
					</u-swipe-action-item>
				</u-swipe-action>
				<u-back-top :scroll-top="scrollTop" mode="square" tips="顶部"></u-back-top>
			</view>
		</template>
	</view>
</template>

<script>
	import {
		getFarmerProductHistory,
		delBrowsingRecordById,
		getBrowseRecordOfTheSpecifiedDate
	} from 'apis/farmer/record.js'
	import loadPage from 'components/common/loadPage'
	import Screening from "components/screening"
	import footpoint from './footpoint/footpoint'
	import footpointNeed from './footpoint/footpointNeed'
	import {getFormatTime,getTimeByDay} from "utils/time.js"
	
	export default {
		components: {
			footpoint,
			footpointNeed,
			Screening,
			loadPage
		},
		data() {
			return {
				scrollTop: 0,
				showDate: false,
				type: 0,
				pageNo: 1,
				pageSize: 10,
				showLoading: true,
				FirstOfDate:false, //判断是不是筛选时间段的浏览记录
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				dateline: [],
				startTime:'',
				endTime:''
			}
		},
		methods: {
			cancelFootprint(uuid) {
				uni.showModal({
					title: '温馨提示',
					content: '确定要删除吗？',
					success: async ({
						confirm
					}) => {
						if (confirm) {
							const {
								code,
								msg
							} = await delBrowsingRecordById(uuid)
							if (code !== 200) return this.$errorMsg(msg)
							this.dateline = this.dateline.filter(item => item.productId !== uuid)
						}
					}
				})
			},
			getSelectDateRange(range){
				this.pageNo = 1
				this.FirstOfDate = true
				this.startTime = range[0]
				this.endTime = range.pop()
				this.reqRecordOfDate()
			},
			//根据时间段获取浏览足迹
			async reqRecordOfDate(){
				const {pageNo,pageSize,type,endTime,startTime} = this
				const result = await getBrowseRecordOfTheSpecifiedDate(pageNo,pageSize,type,startTime,endTime)
				if(result.code === 200){
					if(this.FirstOfDate){
						this.dateline = [...result.data.list]
						this.FirstOfDate = false
					}else{
						this.dateline = [...this.dateline,...result.data.list]
					}
					this.pageNo++
				}
			}
		},
		async onLoad() {
			this.endTime = getFormatTime({format:"yyyy-mm-dd"})
			this.startTime = getTimeByDay(-7,"yyyy-mm-dd")
			await this.reqRecordOfDate()
			this.showLoading = false
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		onReachBottom() { //到达底部
			this.reqRecordOfDate()
		},
	}
</script>

<style>
	.fpInfo {
		width: 94vw;
		padding: 23rpx 0;
		margin-left: 3vw;
		font-size: 28rpx;
	}

	.fpCard {
		margin-top: 5px;
	}

	.u-swipe-action-item.data-v-2fea6ae7 {
		position: relative;
		overflow: hidden;
		margin: 4rpx 0;
	}

	.u-swipe-action-item__right .data-v-2fea6ae7 {
		margin: 2px 0;
	}
</style>
